<!-- eslint-disable vue/no-mutating-props -->
<!--
 * @Author: C.
 * @Date: 2023-12-12 18:38:19
-->
<template>
  <view>
    <view class="input-wrapper" @click.stop="inputClick">
      <Input
        v-if="mode !== 'range'"
        :model-value="modelValue"
        placeholder="请输入"
        type="select"
      >
        <template #suffix>
          <Icon name="down" :class="openPicker ? 'm-turn-over' : ''" />
        </template>
      </Input>
      <view v-else class="text-range-wrapper">
        <span :class="modelValue ? '' : 'place-holder'">{{ rangeText }}</span>
        <Icon name="down" :class="openPicker ? 'm-turn-over' : ''" />
      </view>
      <!-- input 阻碍了点击事件 使用mask覆盖-->
      <view class="input-mask" />
    </view>
    <Popup v-model="openPicker" open-direction="bottom" style="z-index: 20091">
      <view class="tn-pt">
        <Calendar v-model="dateRef" v-bind="$attrs" :mode="mode" />
      </view>
      <view class="button-wrapper">
        <Button
          font-size="36"
          custom-class="popup-calendar-button"
          @click="confirm"
        >
          选择所选日期
        </Button>
      </view>
    </Popup>
  </view>
</template>
<script lang="ts" setup>
// ----------------------------- 第三方引入 -----------------------------
import { computed, ref } from 'vue'

// ----------------------------- hooks -----------------------------

// ----------------------------- 组件 -----------------------------
import Popup from '@tuniao/tnui-vue3-uniapp/components/popup/src/popup.vue'
import Button from '@tuniao/tnui-vue3-uniapp/components/button/src/button.vue'
import Calendar from '@tuniao/tnui-vue3-uniapp/components/calendar/src/calendar.vue'
import Input from '@tuniao/tnui-vue3-uniapp/components/input/src/input.vue'
import Icon from '@tuniao/tnui-vue3-uniapp/components/icon/src/icon.vue'
// ----------------------------- 其他引入 -----------------------------

const props = defineProps({
  modelValue: {
    type: [String, Array],
  },
  setFormModel: {
    type: Function as PropType<(key: string, value: any) => void>,
    default: null,
  },
  options: {
    type: Array as PropType<Recordable[]>,
    default: () => [],
  },
  startField: {
    type: String,
    default: 'DateStart',
  },
  endField: {
    type: String,
    default: 'DateEnd',
  },
  mode: {
    type: String as PropType<'date' | 'multi' | 'range'>,
    default: 'date',
  },
})
const emits = defineEmits(['update:modelValue'])
//----------------------------- 变量声明区 -----------------------------
const openPicker = ref(false)
const dateRef = ref('')
const rangeText = computed(() => {
  const start = props.modelValue?.[0]
  const end = props.modelValue?.[1]
  if (start || end) {
    return `${start} - ${end || ''} `
  } else {
    return '请点击选择日期范围'
    // return ''
  }
})
// ----------------------------- hooks使用区 -----------------------------

// ----------------------------- 钩子函数区 -----------------------------

//  ----------------------------- 自定义方法区 -----------------------------
function confirm() {
  if (props.endField && props.startField && props.mode == 'range') {
    props.setFormModel(props.startField, dateRef.value[0])
    props.setFormModel(props.endField, dateRef.value[1])
  }
  emits('update:modelValue', dateRef.value)
  close()
}
function inputClick() {
  openPicker.value = true
}
function close() {
  openPicker.value = false
}
</script>
<style lang="scss" scoped>
.input-wrapper {
  position: relative;
  .input-mask {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    /* background-color: #fd9e9e; */
    top: 0;
  }
}
.button-wrapper {
  @include flexBox();
  @include iosBottom();
  padding: 30rpx;
  .popup-calendar-button {
    margin: 0rpx 30rpx;
    width: calc(100% - 60rpx) !important;
    padding: 20rpx 30rpx !important;
  }
}
.place-holder {
  color: var(--tn-text-color-placeholder);
  /* color: '#eee'; */
}
.text-range-wrapper {
  height: 50rpx;
  @include flexBox($jc: space-between);
}
</style>
